/* CSS Document */
html{font-size:14px}
@font-face {
/* font-test*/
font-family: myfirstfont;
src:url('../font/gdzt.ttf');
}

@font-face {
font-family: mysecontfont;
src:url('../font/fzmwfont_downyi.com.ttf');
}
.c_con{	background:#2a3c7d ;
	 background-size:100%;position:absolute; margin:0 auto; height:inherit; width:100%;}
.topbar,.topbar_1{ width:100%; margin:0 auto;}
.topbar img{ width:100%;}
.topbar_1{ margin-top:1.5rem;}
.topbar_1 img{ height:auto; width:80%; margin-left:10%; margin-bottom:3rem;}
.bottom_bar{position:absolute; bottom:0rem; z-index:5}
.bottom_bar img{height:auto; width:90%;}
.btn img{ width:35%; position:absolute; bottom:5rem; z-index:8; right:4rem;}
.foot{position: absolute;width:100%; bottom:0rem; z-index:0; right:0}
.foot img{ width:100%;height:auto;}

/*首页动画*/
	#box{
		position: relative;
		width: 100%;
		z-index:9999;
	}
	#box img{
		position: absolute;
	}
	#box img:nth-child(1){
		/*left:-8px;*/
		top:2rem;
		left:-1000px; 
		width:76%; margin-left:12%; margin-bottom:0rem; margin-top:5%;}
	#box img:nth-child(1).on{
		left:0px;	
		animation: shake 0.8s linear;
	}
	#box img:nth-child(2){
		top:15rem;
		left:-1000px;
		z-index:999;
		width:90%;
	}
	#box img:nth-child(2).on{
		left:0;
		transition: 0.5s 0.5s;
	}
	#box img:nth-child(3){
		left:-1000px;
		top:28rem;
		z-index:9999;
	}
	#box img:nth-child(3).on{
		left:50%;
		transition: 0.5s 1s;
	}
	@keyframes shake {
		0%{
			transform: scale(0);
		}
		30%{
			transform: scale(1.2);
		}
		40%{
			transform: scale(0.8);
		}
		50%{
			transform: scale(1.15);
		}
		60%{
			transform: scale(0.9);
		}
		70%{
			transform: scale(1.1);
		}
		80%{
			transform: scale(0.95);
		}
		90%{
			transform: scale(1.05);
		}
		100%{
			transform: scale(1);
		}
	}
/*首页动画*/

.man{ -webkit-animation-name: greenPulse;animation-name: greenPulse; -webkit-animation-duration: 3s;animation-duration: 3s;}
.s_man{ height:auto; width:95%; margin-left:2.5%; position:absolute; top:2rem; z-index:5}
.content{ position: relative; z-index:6;top:10rem;}

.four img,.five img,.six img,.seven img,.eight img,.nine img,.ten img,.eleven img,.twelve img{ width:50%; height:auto;}
.four{ position: absolute; left:13rem; text-align:center; }
.five{position: absolute; left:0; top:4rem;text-align:center;}
.six{position: absolute; right:1rem; top:6rem; text-align:right;}
.seven{position: absolute; left:8rem; top:11rem;text-align:center;}
.eight{position: absolute; left:1rem; top:13rem;text-align:left;}
.nine{position: absolute; right:2rem; top:12.5rem;text-align:right;}
.ten{position: absolute; left:1rem; top:19rem;text-align:center;}
.eleven{position: absolute;left:5rem; top:19rem;text-align:left;}
.twelve{position: absolute; left:12rem; top:17rem;text-align:center;}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

.an{
    -webkit-transform: rotate(360deg);
    animation: rotation 9s linear infinite;
    -moz-animation: rotation 9s linear infinite;
    -webkit-animation: rotation 9s linear infinite;
    -o-animation: rotation 9s linear infinite;
}
.t_listbg{ position:absolute; bottom:0; width:100%; background:url(../images/listbg.png) no-repeat;  -o-background-size:100%;
     -webkit-background-size: 100%; height:88%; z-index:5; }
.con{ position:absolute; z-index:999;top:2rem; width:100%;float:left;}
.bt{ float:left; width:100%; line-height:2.5rem; height:5rem; text-align:left; text-indent:20%; font-size:1.8rem;font-family: myfirstfont; margin-top:1rem; color:#fff; background:url(../images/3_03.png) 28% top no-repeat;-o-background-size:50%; -webkit-background-size: 50%;}
.tx{ float:left;height:5.5rem; width:5.5rem;background:url(../images/tx.png) no-repeat;     -o-background-size:100%;
     -webkit-background-size: 100%;margin-right:1rem; margin-left:4rem; margin-top:2rem; }
.tx img{ float:left;height:4.1rem; width:4.1rem; -webkit-border-radius:2.5rem; margin-left:0.7rem; margin-top:0.7rem;
    -moz-border-radius:2.5rem;
    border-radius:2.5rem;}
.nc{z-index:555; margin-left:5rem; top:4rem; position:relative;}
.p_text{  height:2rem; width:12rem; float:left; font-size:1.3rem; color:#aa0c30; font-family: myfirstfont; overflow:hidden; }
.w_con{ position:relative; z-index:998; width:80%; margin:4rem 10% 0; float:left;}
.w_con h2{ float:left; width:100%;}
.w_con h2 img{ width:88%; margin-left:6%;}
.w_con ul{ float:left; width:82%; margin:0 9%; line-height:2rem; font-size:1.8rem; color:#aa4a00; font-family: myfirstfont;}
.w_btn{ position: relative; z-index:996;left:0; top:0%; float:left; margin-left:10%}
.w_btn img{ width:35%; margin-left:8%; float:left; position:relative;top:1rem;}
.w_code{ position:relative; z-index:996;left:0; top:2%;  float:left; margin-left:18%}
.w_code_left{ float:left; width:28%;}
.w_code_left img{ width:90%; height:auto;}
.mt10{ margin-top:2rem;}
.w_code_right{ float:left; width:52%; margin-left:3%; line-height:1.5rem;font-family: myfirstfont; color:#aa4a00; font-size:1.1rem; margin-top:4%;}

 @media only screen (min-device-width:320px){
html{font-size:12px!important;}
} 

@media only screen and (min-device-width:375px){
html{font-size:15px!important;}
#box img:nth-child(1){top:4rem;}
#box img:nth-child(2){top:18rem;}
#box img:nth-child(3){top:33rem;}
.w_code_right{ font-size:1.1rem; }
.s_man{ top:3rem;}
.w_con ul{ line-height:2rem; font-size:1.5rem;}
.nc_top{ font-size:0.9rem; width:7rem;}
.p_text{ width:11rem; }

}

@media only screen and (min-device-width:411px){
html{font-size:17px!important;}
#box img:nth-child(1){top:4rem;}
#box img:nth-child(2){top:18rem;}
#box img:nth-child(3){top:32rem;}
.w_code_right{ font-size:1rem; }
.s_man{ top:3rem;}
.w_con ul{ line-height:2rem; font-size:1.5rem;}
.p_text{ width:11rem; }
}



@media only screen and (min-device-width:414px){
html{font-size:16px!important;}
#box img:nth-child(1){top:3rem;}
#box img:nth-child(2){top:15rem;}
#box img:nth-child(3){top:30rem;}
.w_code_right{ font-size:1.1rem; }
.s_man{ top:3rem;}
.w_con ul{ line-height:2rem; font-size:1.7rem;}
.p_text{ width:12rem; font-size:1.5rem }
}

@media only screen and (min-device-width:768px){
html{font-size:24px!important;}
#box{
		position: relative;
		width:85%;
		margin-left:7%;
		z-index:9999;
	}
#box img:nth-child(1){top:3rem; }
#box img:nth-child(2){top:15rem;}
#box img:nth-child(3){top:30rem;}
.w_code_right{ font-size:1.1rem; }
.s_man{width:80%; margin-left:10%;  top:2rem;}
.w_con ul{ line-height:1.7rem; font-size:1.7rem;}
.content{top:10rem;}
.p_text{ width:12rem; font-size:1.5rem }
.four img,.five img,.six img,.seven img,.eight img,.nine img,.ten img,.eleven img,.twelve img{ width:70%; }
.t_listbg{ position:absolute; bottom:0; width:85%; margin-left:7%; background:url(../images/listbg.png) no-repeat;  -o-background-size:100%;
     -webkit-background-size: 100%; height:36rem; z-index:5; }
	 .w_btn{ position: relative; z-index:996;left:0; top:0%; float:left; margin-left:15%}


}


@media screen and (orientation: landscape){
html{font-size:15px!important; width:60%; margin:0 auto;}
#box{
		position: relative;
		width:80%;
		margin-left:10%;
		z-index:9999;
	}
#box img:nth-child(1){top:3rem; }
#box img:nth-child(2){top:18rem;}
#box img:nth-child(3){top:35rem;}
.w_code_right{ font-size:1.1rem; }
.s_man{width:70%; top:2rem; margin-left:15%;}
.w_con ul{ line-height:1.7rem; font-size:1.7rem;}
.content{top:10rem;}
.p_text{ width:12rem; font-size:1.5rem }
.four img,.five img,.six img,.seven img,.eight img,.nine img,.ten img,.eleven img,.twelve img{ width:60%;  }
.t_listbg{ position:absolute; bottom:0; width:80%; background:url(../images/listbg.png) no-repeat;  -o-background-size:100%;
     -webkit-background-size: 100%; height:40rem; z-index:5; }
	 .w_btn{ position: relative; z-index:996;left:0; top:0%; float:left; margin-left:15%}
.four{ position: absolute; left:25rem; text-align:center; }
.five{position: absolute; left:10rem; top:4rem;text-align:center;}
.six{position: absolute; right:10rem; top:3rem; text-align:right;}
.seven{position: absolute; left:20rem; top:11rem;text-align:center;}
.eight{position: absolute; left:5rem; top:10rem;text-align:left;}
.nine{position: absolute; right:16rem; top:12.5rem;text-align:right;}
.ten{position: absolute; left:5rem; top:19rem;text-align:center;}
.eleven{position: absolute;left:30rem; top:19rem;text-align:left;}
.twelve{position: absolute; left:20rem; top:19rem;text-align:center;}
.c_con{	background:#2a3c7d;background-size:80%;position:absolute; margin:0 auto; height:inherit; width:60%; margin-left:0%}
}











